/* Copyright 2017 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

body.safe-browsing {
  --google-red-900: rgb(165, 14, 14);
  --google-red-700: rgb(197, 34, 31);
  --google-red-600: rgb(217, 48, 37);
  --google-red-500: rgb(234, 67, 53);
  --google-red-100: rgb(250, 210, 207);
  --google-red-50: rgb(252, 232, 230);
  background-color: var(--google-red-600);
  color: white;
}

.safe-browsing :-webkit-any(
    a, #details, #details-button, #proceed-button, h1, h2, p, .small-link) {
  color: white;
}

.safe-browsing button {
  background: white;
  border-color: white;
  color: var(--google-red-700);
}

.safe-browsing button:active {
  box-shadow: 0 1px 2px 0 rgba(165, 14, 14, .3),
      0 2px 6px 2px rgba(165, 14, 14, .15);
}

.safe-browsing button:hover {
  background: var(--google-red-50);
}

.safe-browsing .secondary-button {
  background-color: var(--google-red-600);
  border-color: var(--google-red-100);
  color: white;
}

.safe-browsing .secondary-button:active {
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}

.safe-browsing .secondary-button:hover {
  background-color: var(--google-red-500);
  border-color: var(--google-red-50);
}

.safe-browsing .error-code {
  display: none;
}

.safe-browsing .icon {
  background-image: -webkit-image-set(
      url(images/1x/triangle_white.png) 1x,
      url(images/2x/triangle_white.png) 2x);
}

@media (min-width: 240px) and (max-width: 420px) and
       (min-height: 401px),
       (min-width: 421px) and (min-height: 240px) and
       (max-height: 560px) {
  body.safe-browsing .nav-wrapper {
    background: var(--google-red-600);
    box-shadow: 0 -12px 24px var(--google-red-600);
  }
}

.safe-browsing-billing .icon {
  background-image: -webkit-image-set(
      url(images/1x/triangle_red.png) 1x,
      url(images/2x/triangle_red.png) 2x);
}

.safe-browsing-enhanced-protection-message {
  background-color: rgba(0, 0, 0, 0.2); /* black 20% opacity */
  border: 1px solid rgba(0, 0, 0, 0.3); /* black 30% opacity */
}

.safe-browsing-enhanced-protection-message .icon {
  background-image: url(images/light_bulb_white.svg);
}
